<template>
    <n-breadcrumb separator=">">
        <n-breadcrumb-item @click="isViewStudents = false">
            班级管理
        </n-breadcrumb-item>
        <n-breadcrumb-item v-show="isViewStudents">
            查看学生
        </n-breadcrumb-item>
    </n-breadcrumb>
<!--    <n-input-group>-->
<!--        <n-input v-model:value="search" type="text" placeholder="搜索班级" :style="{ width: '10%' }" />-->
<!--        <n-button type="primary" ghost>-->
<!--            搜索-->
<!--        </n-button>-->
<!--    </n-input-group>-->
    <!--数据展示-->
    <n-data-table
            :columns="isViewStudents?studentsColumns:columns"
            :data="isViewStudents?students:useTeacher.class"
            :bordered="false"
            :max-height="'75vh'"
            :scroll-x="1800"
            :row-key="rowKey"
            children-key="noChildren"
            @update:checked-row-keys="handleCheck"
    />
</template>

<script setup>
import { useTeacherStore } from "@/stores/teacher";
const isViewStudents = ref(false)

const useTeacher = useTeacherStore()
let search = ref('')
// 选中班级
let checkedRowKeys = ref([])
let rowKey = (row) => row.id
let handleCheck = (rowKeys) => {
    checkedRowKeys.value = rowKeys;
}
// 控制展示几种内容
const columns = [
    {
        type: "selection",
        key: null
    },
    {
        title: "班级编号",
        key: "class_id"
    },
    {
        title: "班级",
        key: "class_name"
    },
    {
        title: "所属学院",
        key: "college"
    },
    {
        title: "所属专业",
        key: "profession"
    },

    {
        title: '学生人数',
        key: 'students_number'
    },
    {
        title: "入学时间",
        key: "join_school"
    },
    {
        title: '操作',
        align: "center",
        titleAlign: 'center',
        key: 'actions',
        render(row) {
            // 操作列表
            let array = {
                view: '查看学生',
            }
            let list = [];
            for (let key in array) {
                list.push(
                    h(
                        'span',
                        {
                            class: 'span-button pointer',
                            onClick: () => operation[key](row)
                        },
                        {default: () => array[key]}
                    )
                )
            }
            return list
        }
    }
];
const studentsColumns = [
    {
        title: "学号",
        key: "student_id"
    },
    {
        title: "姓名",
        key: "name"
    },
    {
        title: "手机号",
        key: "phone"
    },
    {
        title: "性别",
        key: "gender"
    },
    {
        title: "登录账号",
        key: "account"
    },
]
const students = ref([])
const view = (row) => {
    console.log(row)
    students.value = row.children
    isViewStudents.value = true
}
// 操作集合
const operation = {
   view
}


</script>

<style scoped lang="less">
.n-input{
  min-width: 10%;
}
</style>